<template>
  <div id="CourseTrainingPlan">
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="课程基本信息">
        <CourseInf ref="CourseInf" :role="role"/>
      </a-tab-pane>
      <a-tab-pane key="2" tab="学员信息">
        <StudentInf ref="StudentInf" :role="role"/>
      </a-tab-pane>
      <a-tab-pane key="3" tab="课程计划">
        <LessonPlan
          ref="LessonPlan"
          v-if="!isDetail"
          @changeIsDetail="changeIsDetail"
          :role="role"
        />
        <LessonDetail
          ref="LessonDetail"
          v-if="isDetail"
          @changeIsDetail="changeIsDetail"
          :detailData="detailData"
          :role="role"
        />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import CourseInf from "@/components/LessonPlan/CourseInf.vue"; //课程信息
import StudentInf from "@/components/LessonPlan/StudentInf.vue"; //学员信息
import LessonPlan from "@/components/LessonPlan/index.vue"; //课程计划
import LessonDetail from "@/components/LessonPlan/LessonDetail.vue"; //课程计划详情
export default {
  props:{
    role:{},//3是管理,1是学员
  },
  components: {
    CourseInf,
    StudentInf,
    LessonPlan,
    LessonDetail,
  },
  data() {
    return {
      isDetail: false, //是否为课程计划详情页面
      selectedRowKeys: [], //抽屉层的指定选中项的 key 数组
      visible: false, //抽屉弹出层是否可见
      detailData: null, //课程资源详情的数据
    };
  },
  created() {},
  computed: {
    rowSelection() {
      //抽屉弹出层的table的单选项的相关配置
      return {
        type: "radio",
        columnTitle: "选择",
        onChange: (key, row) => {
          //row代表单选框所选内容
          this.selectedRowKeys = [row[0].id];
        },
        selectedRowKeys: this.selectedRowKeys,
      };
    },
  },
  methods: {
    changeIsDetail(val) {
      if (val.data) {
        this.detailData = { ...val.data }; //课程资源详情的数据
      }
      this.isDetail = val.status;
    },
  },
};
</script>
<style scoped>
#CourseTrainingPlan {
  padding: 24px 32px;
  margin: 30px 20px 0 20px;
  border-radius: 2px;
}
</style>
<style lang="scss">
#CourseTrainingPlan {
  height: 800px;
  background: url("~@/assets/img/tableDataBg.png") repeat 100% !important;
  background-size: cover !important;
}
</style>